import { use, useState, Suspense } from "react";
import PropTypes from "prop-types";
function createPromise(value, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value);
    }, delay);
  });
}
function DisplayData({ data }) {
  const result = use(data);
  return <div>{result}</div>;
}
DisplayData.propTypes = {
  data: PropTypes.object.isRequired,
};
function App() {
  const [promise, setPromise] = useState(() => createPromise("初始数据", 1000));
  return (
    <div>
      <h2>数据更新</h2>
      <Suspense fallback={<p>loading....</p>}>
        <DisplayData data={promise} />
      </Suspense>
      <button
        onClick={() => {
          setPromise(createPromise("更新后的数据", 3000));
        }}
      >
        更新数据
      </button>
    </div>
  );
}
export default App;
//异步调用接口获取返回的数据进行渲染
